<script setup name="Count">
import { useCountStore } from "@/stores/count";
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
let n = ref(1)
let countStore = useCountStore();
// const {sum} = toRefs(countStore) // 会把countStore里所有数据和方法封装成ref类型
const { sum, bigSum } = storeToRefs(countStore) // 只封装数据
console.log('sum1',countStore.sum);
console.log('sum2', sum)
function add() {
  // 方式1
  // countStore.sum += n.value
  // 方式2，批量修改多数据
  /* countStore.$patch({
    sum: countStore.sum + n.value,
    // a: 'fsa',
    // b: 'fds',
  }) */
  // 方式3
  countStore.increment(n.value)
}

function minus() {
  countStore.sum -= n.value
}


</script>
<template>
  <div>
    <!-- <h2>求和为{{countStore.sum}}</h2> -->
    <h2>求和为{{ sum }}</h2>
    <h2>放大十倍后{{bigSum}}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">点击相加</button>
    <button @click="minus">点击相减</button>
  </div>
</template>



<style scoped></style>